import { getCssVariableValue } from '@/utils/utils';

// 计算最大值
export function calMax(arr) {
  let max = Math.max(...arr);
  let maxint = Math.ceil(max / 9.5);
  let maxval = maxint * 10;
  if (maxval == 0 || max < 1) {
    maxval = 1;
  }
  return maxval;
}

// 计算最小值
export function calMin(arr) {
  let min = Math.min(...arr);
  let minint = Math.floor(min / 10);
  let minval = minint * 10;
  return minval;
}

// 系列相关
export function getSeriesData({ type, name, color, ...others }) {
  let config = {
    type,
    name,
    itemStyle: { color },
  };
  if (type === 'line') {
    config = {
      ...config,
      symbol: 'none',
      lineStyle: { width: 1 },
    };
  } else if (type === 'bar') {
    config = {
      barMaxWidth: 20,
      ...config,
    };
  }
  return {
    ...config,
    ...others,
  };
}

// 基础配置
export const getOptions = ({ titleText, remSize, XAXIS, yAxis, grid, legendData, yGrid }) => {
  return {
    title: {
      text: titleText,
      show: true,
      top: 8 * remSize,
      left: -4 * remSize,
      textStyle: {
        fontSize: 14 * remSize,
        fontWeight: 300,
        lineHeight: 14 * remSize,
        color: '#FFFFFF',
      },
    },
    grid: grid || {
      top: 20 * remSize,
      left: ((yGrid || 36) + 10) * remSize,
      bottom: 46 * remSize,
      right: 0 * remSize,
    },
    tooltip: {
      trigger: 'axis',
      padding: [12 * remSize, 17 * remSize],
      formatter: (params) => {
        let res = '<div style="font-size:12px">';
        params.forEach((item) => {
          res += `<span style=\"display:flex;align-items: center;justify-content: space-between;\">
            <span style=\"\">${item.marker}${item.seriesName}</span><span style=\"padding-left:20px\">`;
          res +=
            `${
              parseFloat(item.data).toFixed(2) === 'NaN' ? '-' : parseFloat(item.data).toFixed(2)
            }` + '<br/>';
          res += `</span></span>`;
        });
        return `<span style=\"font-size:12px\">` + params[0].name + '</span><br/>' + res + '</div>';
      },
      position: function (point, params, dom, rect, size) {
        let x = 0;
        let y = 0;
        const pointX = point[0];
        const pointY = point[1];
        const boxWidth = size.contentSize[0];
        const boxHeight = size.contentSize[1];
        if (boxWidth > pointX) {
          x = pointX + 15;
        } else {
          x = pointX - boxWidth - 15;
        }
        if (boxHeight > pointY) {
          y = 5;
        } else {
          y = pointY - boxHeight;
        }
        return [x, y];
      },
      show: true,
      backgroundColor: '#161A1D',
      borderColor: '#161A1D',
      borderWidth: 1,
      textStyle: {
        color: '#A7A8A9',
        fontFamily: 'PingFang SC',
        fontStyle: 'none',
      },
    },
    legend: {
      right: 'center',
      top: 'bottom',
      width: '100%',
      itemGap: 13,
      itemWidth: 16,
      itemHeight: 8,
      textStyle: {
        color: getCssVariableValue('--chart-legend-color'),
        fontSize: 12 * remSize,
        height: 14 * remSize,
        lineHeight: 17 * remSize,
      },
      padding: 0,
      data: legendData,
      inactiveColor: '#545454',
      inactiveBorderColor: '#545454',
      inactiveBorderWidth: 'inherit',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: XAXIS.map((v) => v || ''),
      splitNumber: Math.random(),
      triggerEvent: true,
      boundaryGap: ['0%', '0%'],
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisLabel: {
        // showMaxLabel: false,
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        formatter: (value) => {
          const _label = value.split('');
          return _label.length > 10 ? value.substring(0, 9) + '...' : value;
        },
        // interval: Math.floor(XAXIS.length / 10),
        fontSize: 12 * remSize,
        lineHeight: 12 * remSize,
        margin: 9 * remSize,
      },
    },
    yAxis: yAxis || {
      type: 'value',
      axisLine: {
        show: false,
      },
      nameTextStyle: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 12 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  };
};
// 偏差分析
export function DeviationTariff(data = {}, remSize) {
  const {
    DeviationCost = [],
    RecycleDeviationCost = [],
    FeeDeductionCost = [],
    DeductionPrice = [],
    XAXIS = [],
  } = data;
  const yGrid =
    String(
      calMax([
        calMax(DeviationCost),
        calMax(RecycleDeviationCost),
        calMax(FeeDeductionCost),
        calMax(DeductionPrice),
      ]),
    ).length * 7;
  const yAxis = [
    {
      type: 'value',
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [
    {
      name: '收入偏差',
    },
    {
      name: '扣费偏差',
    },
    {
      name: '扣费收入偏差',
    },
    {
      name: '差额电费偏差',
    },
  ];
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    yGrid,
    grid: {
      top: 20 * remSize,
      left: ((yGrid || 36) + 24) * remSize,
      bottom: 46 * remSize,
      right: 0 * remSize,
    },
  });

  return {
    ...option,
    series: [
      getSeriesData({
        name: '收入偏差',
        type: 'line',
        data: DeviationCost,
        color: '#837ADC',
        lineStyle: { width: 1 },
        symbol: 'circle',
        smooth: true,
      }),
      getSeriesData({
        name: '扣费偏差',
        type: 'line',
        data: RecycleDeviationCost,
        color: '#BFEBA2',
        lineStyle: { width: 1 },
        symbol: 'circle',
        smooth: true,
      }),
      getSeriesData({
        name: '扣费收入偏差',
        type: 'line',
        data: FeeDeductionCost,
        color: '#F7925A',
        lineStyle: { width: 1 },
        symbol: 'circle',
        smooth: true,
      }),
      getSeriesData({
        name: '差额电费偏差',
        type: 'line',
        data: DeductionPrice,
        color: '#D54941',
        lineStyle: { width: 1 },
        symbol: 'circle',
        smooth: true,
      }),
    ],
  };
}
// 电价分析
export function DeductionIncome(data = {}, remSize) {
  const {
    ActualBComprehensivePrice = [],
    SimulateAActualComprehensivePrice = [],
    ActualBActualAAvgPrice = [],
    SimulateAAvgPrice = [],
    AvgPrice = [],
    BalancePrice = [],
    XAXIS = [],
  } = data;
  const yGrid =
    String(
      calMax([
        calMax(ActualBComprehensivePrice),
        calMax(SimulateAActualComprehensivePrice),
        calMax(ActualBActualAAvgPrice),
        calMax(SimulateAAvgPrice),
        calMax(AvgPrice),
        calMax(BalancePrice),
      ]),
    ).length * 7;
  const yAxis = [
    {
      type: 'value',
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [
    {
      name: '实际综合均价',
    },
    {
      name: '模拟综合均价',
    },
    {
      name: '实际中长期均价',
    },
    {
      name: '模拟中长期均价',
    },
    {
      name: '现货日前加权均价',
    },
    {
      name: '差额电价',
    },
  ];
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    yGrid,
    grid: {
      top: 20 * remSize,
      left: ((yGrid || 36) + 24) * remSize,
      bottom: 46 * remSize,
      right: 0 * remSize,
    },
  });

  return {
    ...option,
    series: [
      getSeriesData({
        type: 'line',
        name: '实际综合均价',
        smooth: true,
        symbol: 'circle',
        color: '#F7925A',
        data: ActualBComprehensivePrice,
      }),
      getSeriesData({
        type: 'line',
        name: '模拟综合均价',
        smooth: true,
        symbol: 'circle',
        color: '#3AD7CE',
        data: SimulateAActualComprehensivePrice,
      }),
      getSeriesData({
        type: 'line',
        name: '实际中长期均价',
        smooth: true,
        symbol: 'circle',
        color: '#E6E963',
        data: ActualBActualAAvgPrice,
      }),
      getSeriesData({
        type: 'line',
        name: '模拟中长期均价',
        smooth: true,
        symbol: 'circle',
        color: '#00BF8F',
        data: SimulateAAvgPrice,
      }),
      getSeriesData({
        type: 'line',
        name: '现货日前加权均价',
        smooth: true,
        symbol: 'circle',
        color: '#DB83C7',
        data: AvgPrice,
      }),
      getSeriesData({
        type: 'line',
        name: '差额电价',
        smooth: true,
        symbol: 'circle',
        color: '#D54941',
        data: BalancePrice,
      }),
    ],
  };
}
// 电量分析
export function DeductionPrice(data = {}, remSize) {
  const {
    ActualBTotalLongTermQuantity = [],
    SimulateATotalLongTermQuantity = [],
    BalanceQuantity = [],
    OnlineQuantity = [],
    XAXIS = [],
  } = data;
  const yGrid =
    String(
      calMax([
        calMax(ActualBTotalLongTermQuantity),
        calMax(SimulateATotalLongTermQuantity),
        calMax(BalanceQuantity),
        calMax(OnlineQuantity),
      ]),
    ).length * 7;
  const yAxis = [
    {
      type: 'value',
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      nameTextStyle: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [
    {
      name: '实际累计中长期电量',
    },
    {
      name: '模拟累计中长期电量',
    },
    {
      name: '差额电量',
    },
    {
      name: '上网电量',
    },
  ];
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    yGrid,
    grid: {
      top: 20 * remSize,
      left: ((yGrid || 36) + 24) * remSize,
      bottom: 46 * remSize,
      right: 0 * remSize,
    },
  });

  return {
    ...option,
    series: [
      getSeriesData({
        name: '实际累计中长期电量',
        type: 'line',
        symbol: 'circle',
        smooth: true,
        data: ActualBTotalLongTermQuantity,
        color: '#30D485',
        lineStyle: { width: 1 },
      }),
      getSeriesData({
        name: '模拟累计中长期电量',
        type: 'line',
        symbol: 'circle',
        smooth: true,
        data: SimulateATotalLongTermQuantity,
        color: '#F5BE15',
        lineStyle: { width: 1 },
      }),
      getSeriesData({
        name: '差额电量',
        type: 'line',
        symbol: 'circle',
        smooth: true,
        data: BalanceQuantity,
        color: '#D54941',
        lineStyle: { width: 1 },
      }),
      getSeriesData({
        name: '上网电量',
        type: 'line',
        symbol: 'circle',
        smooth: true,
        data: OnlineQuantity,
        color: '#3CB1FB',
        lineStyle: { width: 1 },
      }),
    ],
  };
}
